<template>
    <div class="Home flex">
        <Aside></Aside>
        <!-- 中间主体开始 -->
        <div class="center">
            <Nav></Nav>
            <div class="subject">
                <div class="topimgbox">
                    <img class="img" src="../../assets/img/xxx.jpg" alt="">
                </div>
                <!-- supplier开始 -->
                <div class="supplier mb-30">
                    <h2 class="mb-15">Supplier</h2>
                    <dd>
                        <dl class="item flex">
                            <div class="name">
                                <p>Kernal Automation Co.Limited</p>
                                <span>China</span>
                            </div>
                            <div class="leibie">
                                <p>Company Name</p>
                                <span>country</span>
                            </div>
                        </dl>
                        <dl class="item flex">
                            <div class="name">
                                <p>Kernal Automation Co.Limited</p>
                                <span>China</span>
                            </div>
                            <div class="leibie">
                                <p>Company Name</p>
                                <span>country</span>
                            </div>
                        </dl>
                    </dd>

                </div>
                <!-- Product开始 -->
                <div class="Product mb-30">
                    <h2 class="mb-15">Product</h2>
                    <dd class="list flex jc-sb">
                        <dl class="item pt-15 pl-10 pr-10 pb-15" @click='start = !start'>
                            <div class="imgbox flex aic jc-c mb-10">
                                <img class="img" src="../../assets/img/cccc.jpg" alt="">
                            </div>
                            <p class="f16 linhint">6AV2123-2DB03-0AX0</p>
                            <p class="f12 linhint fonts">Company Name: Kernal Automation Co.Limited</p>
                            <p class="f14 linhint">Product Code: 6AV2123-2DB03-0AX0</p>
                            <p class="f12 mb-10 linhint">Availability: In Stock</p>
                            <p class="f14 linhint">$178.64</p>
                            <p class="f8 linhint fonts">Ex Tax: $178.64</p>
                        </dl>
                        <dl class="item pt-15 pl-10 pr-10 pb-15">
                            <div class="imgbox flex aic jc-c mb-10">
                                <img class="img" src="../../assets/img/cccc.jpg" alt="">
                            </div>
                            <p class="f16 linhint">6AV2123-2DB03-0AX0</p>
                            <p class="f12 linhint fonts">Company Name: Kernal Automation Co.Limited</p>
                            <p class="f14 linhint">Product Code: 6AV2123-2DB03-0AX0</p>
                            <p class="f12 mb-10 linhint">Availability: In Stock</p>
                            <p class="f14 linhint">$178.64</p>
                            <p class="f8 linhint fonts">Ex Tax: $178.64</p>
                        </dl>
                        <dl class="item pt-15 pl-10 pr-10 pb-15">
                            <div class="imgbox flex aic jc-c mb-10">
                                <img class="img" src="../../assets/img/cccc.jpg" alt="">
                            </div>
                            <p class="f16 linhint">6AV2123-2DB03-0AX0</p>
                            <p class="f12 linhint fonts">Company Name: Kernal Automation Co.Limited</p>
                            <p class="f14 linhint">Product Code: 6AV2123-2DB03-0AX0</p>
                            <p class="f12 mb-10 linhint">Availability: In Stock</p>
                            <p class="f14 linhint">$178.64</p>
                            <p class="f8 linhint fonts">Ex Tax: $178.64</p>
                        </dl>
                    </dd>
                </div>
            </div>
        </div>
        <!-- 右边栏开始 -->
        <div class="right" v-show="start">
            <p class="f12 linhint mb-10">Artikelnummer 6AV2123-2DB03-0AX0</p>
            <div class="imgFont flex jc-sb mb-20">
                <img src="../../assets/img/cccc.jpg" />
                <p class="f12" style="transform: scale(0.8);">
                    SIMATIC HMI, KTP400 BASIC, BASIC PANEL, KEY AND TOUCH OPERATION, 4" TFT DISPLAY, 65536 COLORS,
                    PROFINET
                    INTERFACE, CONFIGURATION FROM WINCC BASIC
                    V13/ STEP7 BASIC V13, CONTAINS OPEN SOURCE SW WHIC H IS PROVIDED FREE OF CHARGE FOR DETAILS SEE CD
                </p>
            </div>
            <div class="mb-10">
                <p class="f12">Product type designation</p>
                <p class="f12">Display</p>
                <dd>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Design of display</p>
                        <p class="f12 font">TFT widescreen display, LED backlighting</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Screen diagonal</p>
                        <p class="f12 font">4.3 min</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Display width</p>
                        <p class="f12 font">95 mm</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Display height</p>
                        <p class="f12 font">T53.9 mm</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Number of colors</p>
                        <p class="f12 font">65536</p>
                    </dl>
                </dd>
            </div>
            <div class="mb-10">
                <p class="f12">Resolution (pixels)</p>
                <dd>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Horizontal image resolution</p>
                        <p class="f12 font">480</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Vertical image resolution</p>
                        <p class="f12 font">272</p>
                    </dl>
                </dd>
            </div>
            <div class="mb-10">
                <p class="f12">Backlighting</p>
                <dd>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● MTBF backlighting(at 25°C)</p>
                        <p class="f12 font">20000 h</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Dimmable backlight Control elements</p>
                        <p class="f12 font">Yes</p>
                    </dl>
                </dd>
            </div>
            <div class="mb-10">
                <p class="f12">Keyboard</p>
                <dd>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Number of function keys</p>
                        <p class="f12 font">4</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Keys with LED</p>
                        <p class="f12 font">No</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● System keys</p>
                        <p class="f12 font">No</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Numeric/alphabetical input</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">— Numeric keyboard</p>
                        <p class="f12 font">Yes; Onscreen keyboard</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">— Alphanumeric keyboard</p>
                        <p class="f12 font">Yes; Onscreen keyboard</p>
                    </dl>
                </dd>
            </div>
            <div class="mb-10">
                <p class="f12">Touch operation</p>
                <dd>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Design as touch screen</p>
                        <p class="f12 font">yes</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Installation type/mounting</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Mounting in portrait format possible</p>
                        <p class="f12 font">Yes</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Mounting in landscape format possible</p>
                        <p class="f12 font">Yes</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Supply voltage</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Type of supply voltage</p>
                        <p class="f12 font">24 VDC</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Rated value (DC)</p>
                        <p class="f12 font">24 V</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">permissible range, lower limit (DC)</p>
                        <p class="f12 font">19.2 V</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">permissible range, upper limit (DC)</p>
                        <p class="f12 font">28.8 V</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Input current</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Current consumption (rated value)</p>
                        <p class="f12 font">125 mA</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Inrush current A²s 0.2 A²·s</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Power</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Power consumption, type.</p>
                        <p class="f12 font">3w</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Memory</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Flash</p>
                        <p class="f12 font">Yes</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">RAM</p>
                        <p class="f12 font">Yes</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Usable memory for user data</p>
                        <p class="f12 font">10 Mbyte</p>
                    </dl>
                </dd>
            </div>
            <div class="mb-10">
                <p class="f12">Type of output</p>
                <dd>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Acoustics</p>
                        <p class="f12 font"></p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Buzzer</p>
                        <p class="f12 font">Yes</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">● Speaker</p>
                        <p class="f12 font">No</p>
                    </dl>
                    <dl class="flex jc-sb aic">
                        <p class="f12 font">Time of day</p>
                        <p class="f12 font"></p>
                    </dl>
                </dd>
            </div>
        </div>
    </div>
</template>

<script setup>
import Aside from '../components/Aside.vue'
import Nav from '../components/Nav.vue'
import { ref } from 'vue'
const start = ref(false)
</script>

<style lang="less" scoped>
.Home {

    /* 中间主体开始 */
    .center {
        flex-grow: 1;
        padding: 0px 25px 10px 20px;

        .subject {
            overflow-y: auto;
            height: 92vh;
        }

        .subject::-webkit-scrollbar{
            width: 5px;
        }
        .subject::-webkit-scrollbar-thumb{
            background: #67d0f0;
            border-radius: 5px;
        }

        .topimgbox {
            width: 100%;
            height: 260px;
            background-color: aqua;
            margin-bottom: 70px;
        }

        .img {
            width: 100%;
            height: 100%;
        }

        .supplier {
            .item {
                width: 100%;
                background-color: #ffffff;
                border-bottom: 1px solid #f4f4f4;
            }

            .leibie,
            .name {
                width: 50%;
                padding: 10px;
            }

            .name {
                border-right: 1px solid #f4f4f4;
            }
        }

        .Product {
            .list {
                width: 100%;
            }

            .item {
                width: 28%;
                background-color: #ffffff;
                border-radius: 20px;

                .imgbox {
                    width: 100%;
                    height: 60%;
                    background-color: #f4f4f4;
                    border-radius: 20px;
                }

                .img {
                    width: 80%;
                    height: 70%;
                }

                .linhint {
                    line-height: 20px;
                }

                .fonts {
                    -webkit-transform-origin-x: 0;
                    -webkit-transform-origin-y: 0;
                    transform: scale(0.8);
                }
            }
        }

    }

    /* 右侧边栏开始 */
    .right {
        width: 25%;
        height: 100vh;
        overflow-y: auto;
        padding: 30px 25px 10px 20px;
        border-left: 1px solid #7e4e4e;

        .imgFont {
            width: 100%;
        }

        img {
            width: 120px;
            height: 120px;
        }

        .font {
            width: 62%;
            -webkit-transform-origin-x: 0;
            -webkit-transform-origin-y: 0;
            transform: scale(0.8);
        }
    }
}
</style>